<template>
  <div class="home_container">
    <div class="item">
      <div class="title">推荐歌单</div>
      <div @click="toDetail(1)" class="toall">查看全部</div>
    </div>
    <RecommentList></RecommentList>

    <div class="title">Fou You</div>
    <Foryou></Foryou>

    <div class="title">推荐艺人</div>
    <RecommentSinger></RecommentSinger>
    <div class="item">
      <div class="title">新专速递</div>
      <div @click="toDetail(2)" class="toall">查看全部</div>
    </div>
    <NewAlbum></NewAlbum>

    <div class="item">
      <div class="title">排行榜</div>
    </div>
    <Rank></Rank>
  </div>
</template>

<script>
import RecommentList from "@/components/home/RecommentList";
import Foryou from "@/components/home/Foryou";
import RecommentSinger from "@/components/home/RecommentSinger";
import NewAlbum from "@/components/home/NewAlbum";
import Rank from "@/components/home/Rank";
export default {
  name: "Home",
  components: {
    RecommentList,
    Foryou,
    RecommentSinger,
    NewAlbum,
    Rank,
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    toDetail(index) {
      if (index == 1) {
        this.$router.push("/found");
      } else {
        this.$router.push("/newAlbum");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home_container {
  padding: 2rem 9rem;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    font-size: 27px;
    font-weight: 600;
  }
  .toall {
    cursor: pointer;

    font-size: 13px;
    font-weight: 600;
    color: rgb(91, 89, 92);
  }
}
</style>